<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 设定小黄人容器 */
    .wrap {
      position: relative;
      width: 400px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid red;
    }

    /* 小黄人身体的制作 */
    .xhr_body {
      position: absolute;
      width: 250px;
      height: 400px;
      border: 5px solid #000;
      border-radius: 125px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #ff0;
      overflow: hidden;
    }

    /* 小黄人头发的制作 */
    .xhr_hair_1,
    .xhr_hair_2 {
      position: absolute;
      width: 130px;
      height: 100px;
      border-top: 10px solid #000;
      border-radius: 50%;
      animation:hair 5s ease-in infinite;
    }
    @keyframes hair{
      0%{
        transform: rotate(50deg);
      }
      25%{
        transform: rotate(45deg);
      }
      50%{
        transform: rotate(50deg);
      }
      75%{
        transform: rotate(55deg);
      }
      100%{
        transform: rotate(50deg);
      }
      
    }

    .xhr_hair_1 {
      transform: rotate(50deg);
      left: 100px;
      top: 80px;
    }

    .xhr_hair_2 {
      transform: rotate(50deg);
      left: 102px;
      top: 70px;
    }

    /* 小黄人手臂的制作 */
    .xhr_hand_l,
    .xhr_hand_r {
      width: 100px;
      height: 100px;
      border: 5px solid #000;
      position: absolute;
      border-radius: 30px;
      z-index: -1;
      background-color: #ff0;
    }

    .xhr_hand_l::after,
    .xhr_hand_r::after {
      content: "";

      width: 30px;
      height: 10px;
      background-color: #000;
      position: absolute;
      top: 60px;
      border-radius: 5px;
    }

    .xhr_hand_l::after {
      left: 7px;
      transform: rotateZ(90deg)
    }

    .xhr_hand_r::after {
      right: 6px;
      transform: rotateZ(90deg);
    }

    .xhr_hand_l {
      left: 50px;
      top: 300px;
      transform: rotateZ(30deg);
    }

    .xhr_hand_r {
      right: 50px;
      top: 300px;
      transform: rotateZ(-30deg);
    }


    /* 小黄人腿的制作 */
    .xhr_foot_l,
    .xhr_foot_r {
      width: 40px;
      height: 70px;
      background-color: #000;
      position: absolute;
      top: 490px;
      z-index: -1;
    }

    .xhr_foot_l {
      left: 155px;
    }

    .xhr_foot_r {
      right: 155px;
    }

    .xhr_foot_l::after,
    .xhr_foot_r::after {
      content: "";
      width: 60px;
      height: 40px;
      background-color: #000;
      position: absolute;
      top: 30px;
    }

    .xhr_foot_l::after {
      left: -40px;
      border-radius: 20px;
    }

    .xhr_foot_r::after {
      right: -40px;
      border-radius: 20px;
    }

    /* 眼睛 */
    .xhr_eyes {
      position: absolute;
      top: 60px;
      margin-left: 25px;
    }

    .xhr_eyes_l,
    .xhr_eyes_r {
      width: 90px;
      height: 90px;
      border: 5px solid #000;
      border-radius: 50%;
      background-color: #fff;
      float: left;
    }

    .xhr_eyes_l::after,
    .xhr_eyes_r::after {
      content: "";
      width: 30px;
      height: 20px;
      position: absolute;
      background-color: #000;
      top: 40px;
    }

    .xhr_eyes_l::after {
      left: -26px;
      transform: rotateZ(12deg);
      border-top-right-radius: 5px;
    }

    .xhr_eyes_r::after {
      right: -26px;
      transform: rotateZ(-12deg);
      border-top-left-radius: 5px;
    }

    /* 制作黑眼球 */
    .xhr_l_black,
    .xhr_r_black {
      width: 50px;
      height: 50px;
      background-color: #000;
      position: absolute;
      border-radius: 50%;
      top: 50%;
      margin-top: -25px;
      animation:blackEyes 8s ease-in infinite;
    }
    @keyframes blackEyes{
      0%{
        transform:translate(0);
      }
      20%{
        transform: translate(20px);
      }
      50%{
        transform: translate(0);
      }
      80%{
        transform: translate(-20px);
      }
      100%{
        transform: translate(0);
      }
    }

    .xhr_l_black {
      left: 50%;
      margin-left: 25px;
    }

    .xhr_r_black {
      right: 50%;
      margin-right: 25px;
    }

    /* 制作眼白 */
    .xhr_l_white,
    .xhr_r_white {
      width: 20px;
      height: 20px;
      background-color: #fff;
      animation:whiteEyes 8s ease-in infinite;
      position: absolute;
      border-radius: 50%;
      top: 50%;
      margin-top: -10px;
    }
    @keyframes whiteEyes{
      0%{
        transform:translate(0, 0);
      }
      20%{
        transform: translate(20px ,7px);
      }
      50%{
        transform: translate(0, 0);
      }
      80%{
        transform: translate(-20px, 7px);
      }
      100%{
        transform: translate(0 ,0);
      }
    }
    .xhr_l_white {
      left: 50%;
      margin-left: -50px;
      z-index: 1;
    }

    .xhr_r_white {
      right: 50%;
      margin-right: -50px;
    }

    /* 小黄人嘴巴制作 */
    .xhr_mouth {
      position: absolute;
      width: 60px;
      height: 35px;
      border: 5px solid #000;
      border-radius: 0 0 0 30px;
      left: 90px;
      top: 180px;
      background-color: #fff;
      transform: rotateZ(-30deg);
    }
    .xhr_mouth::after{
      content: "";
      width:80px;
      height:40px;
      border-bottom: 5px solid #000;
      background-color: #ff0;
      position: absolute;
      top:-23px;
      left:0;
      transform: rotateZ(30deg);
      border-radius: 3px;
    }

    /* 制作裤子 */
    .xhr_trousers{
      width:250px;
      height:150px;
      /* border:1px solid red; */
      position: absolute;
      bottom: 0px;
      left:50%;
      margin-left:-125px;
    }
    .xhr_trousers_t{
      width:150px;
      height:50px;
      background: #00f;
      border:5px solid #000;
      border-bottom: none;
      position: absolute;
      top:0px;
      left:50%;
      margin-left:-75px;
      z-index: 1;
    }
    .xhr_trousers_b{
      width:250px;
      height:100px;
      background: #00f;
      border-top: 5px solid #000;
     position: absolute;
     bottom: -5px;
     /* border-radius: 0 0 125px 125px; */
    }
    .t_l_belt,
    .t_r_belt{
      width:100px;
      height:20px;
      border:5px solid #000;
      position: absolute;
      background-color: #00f;
      top:-24px;
    }
    .t_l_belt::after,
    .t_r_belt::after{
      content:"";
      width:15px;
      height:15px;
      position: absolute;
      background-color: #000000;
      border-radius: 50%;
      top:2px;
    }
    .t_l_belt::after{
      right:5px;
      
    }
    .t_r_belt::after{
      left:5px;
    }
    .t_l_belt{
      left:-74px;
      
      transform: rotateZ(35deg);
    }
    .t_r_belt{
      right:-74px;
      transform: rotateZ(-35deg);
    }






    /* .xhr_trousers{
      width:250px;
      height:125px;
      border:5px solid #000;
      position: absolute;
      bottom:95px;
      left:70px;
      background-color: #00f;
      border-radius: 0 0 125px 125px;

    } */
  </style>
</head>

<body>
  <!-- 小黄人的容器 -->
  <div class="wrap">
    <!-- 小黄人的头发 -->
    <div class="xhr_hair">
      <div class="xhr_hair_1"></div>
      <div class="xhr_hair_2"></div>
    </div>
    <!-- 小黄人身体 -->
    <div class="xhr_body">
      <!-- 眼睛 -->
      <div class="xhr_eyes">
        <!-- 左眼睛 -->
        <div class="xhr_eyes_l">
          <div class="xhr_l_black"></div>
          <div class="xhr_l_white"></div>
        </div>
        <!-- 右眼睛 -->
        <div class="xhr_eyes_r">
          <div class="xhr_r_black"></div>
          <div class="xhr_r_white"></div>
        </div>
      </div>
      <!-- 嘴巴 -->
      <div class="xhr_mouth"></div>

      <!-- 裤子 -->
    <div class="xhr_trousers">
      <!-- 裤子的上部分 -->
      <div class="xhr_trousers_t">
        <div class="t_l_belt"></div>
        <div class="t_r_belt"></div>
      </div>
      <!-- 裤子的下部分 -->
      <div class="xhr_trousers_b">
      </div>
    </div>
    </div>

    
    <!-- 小黄人手臂 -->
    <div class="xhr_hand">
      <div class="xhr_hand_l"></div>
      <div class="xhr_hand_r"></div>
    </div>
    <!-- 小黄人腿腿 -->
    <div class="xhr_foot">
      <div class="xhr_foot_l"></div>
      <div class="xhr_foot_r"></div>
    </div>
  </div>
</body>

</html>